<template>
  <div class="view-container">
    <div class="app-title-container title-position">
      <modules-title
        title-name="立项审批详情"
        style="margin-bottom: 20px;"
      >
        <template
          v-if="detailData"
          slot="btn"
        >
          <el-button
            plain
            @click="goBack"
          >返回</el-button>
          <!-- <el-button
            v-hasPermi="{v:['project:my:projectApproval'], isF: detailData.info_status==7&&isAudit}"
            type="primary"
            @click="projectApprovalOperation"
          >
            {{ auditButtonName }}
          </el-button> -->

          <approval
            :affair.sync="auditData"
            :is-text="false"
            @refresh="refreshData"
            @submit="onSubmit"
            @toEdit="toEdit"
            @cancel="onCancel"
          />

        </template>
      </modules-title>
    </div>
    <div
      v-if="detailData"
      class="main-content-container"
    >
      <div class="baseInfo-container">
        <baseInfo :detail-data="detailData" />
      </div>

      <div class="tab-content">
        <comment-view
          :datas="auditData"
          :is-show="true"
        />
      </div>
    </div>

    <!-- 立项审批 -->
    <!-- <project-approval-dialog
      ref="projectApprovalDialog"
      :project-id="projectId"
      :audit-data="auditData"
      @projectApprovalSuccess="projectApprovalSuccess"
    /> -->
  </div>
</template>

<script>
import {
  auditDetailByFlowId,
  applyResolution,
  projectApproval
} from '@/api/projectInformation'

export default {
  name: 'ProAuditDetails',
  components: {
    BaseInfo: () => import('./modules/baseInfo'),
    AuditDialog: () => import('../../modules/auditDialog.vue'),
    ProjectApprovalDialog: () =>
      import('../../modules/projectApprovalDialog.vue')
  },
  data() {
    return {
      userInfo: null,
      projectId: '',
      flowId: '',
      detailData: null,
      departmentLookInfo: null,
      statusData: {
        info_status: 0
      },
      settingList: [],
      auditButtonName: '立项审批',
      auditData: {},
      isAudit: false
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.flowId = this.$route.query.f_id || ''
    this.userInfo = this.$store.getters.userInfo
    if (this.flowId) {
      this.getAuditDetailByFlowId(this.flowId)
      this.getAuditData(this.flowId)
    }
  },
  methods: {
    getAuditData(id) {
      this.$api.PROJECT_START_CHECK_DETAIL(id).then((res) => {
        if (res.code === 200) {
          this.auditData = res.data
          this.getButton()
        }
      })
    },
    goBack() {
      this.$router.back()
    },
    printApproval() {
      this.$refs.printApproval.print()
    },
    getButton() {
      if (
        this.auditData.State !== 'Done' ||
        this.auditData.State !== 'Refuse'
      ) {
        if (this.auditData.Next && this.auditData.Next.length) {
          for (let i = 0; i < this.auditData.Next.length; i++) {
            const data = this.auditData.Next[i]
            const index = data.Staffs.findIndex(
              (a) => a === this.userInfo.user.id
            )
            if (index !== -1) {
              this.isAudit = true
              this.auditButtonName = data.ItemName
              break
            } else {
              this.isAudit = false
            }
          }
        }
      }
    },
    // 获取立项详情
    getAuditDetailByFlowId(id) {
      const that = this
      const datas = { id: id }
      auditDetailByFlowId(datas).then((res) => {
        if (res.code === 200) {
          that.detailData = res.data
          that.projectId = that.detailData.id
          // 需求状态
          that.statusData.info_status = that.detailData.info_status
        }
      })
    },
    // 申请决议
    applyResolutionOperation() {
      const dat = { id: this.projectId }
      applyResolution(dat).then((res) => {
        if (res.code === 200) {
          this.getAuditDetailByFlowId(this.flowId)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    // 立项审批
    projectApprovalOperation(subdata, callback) {
      projectApproval(subdata).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '审批成功'
          })
          this.$route.params.refresh = true // 返回时刷新列表
          this.getAuditDetailByFlowId(this.flowId)
          this.getAuditData(this.flowId)
          callback(true)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    refreshData() {
      this.$route.params.refresh = true // 返回时刷新列表
      this.getAuditDetailByFlowId(this.flowId)
      this.getAuditData(this.flowId)
    },
    toEdit: function(affairs) {
      console.log(affairs)
      this.$router.push({
        name: 'submitApproval',
        query: {
          auditProjectId: this.projectId,
          types: 1
        }
      })
    },
    // affairsId, stepId , type  //选择类型, template //备注, RejectStepId  //步骤id, isVisible
    onSubmit: function(
      affairsId,
      stepId,
      type,
      template,
      RejectStepId,
      callback
    ) {
      console.log(affairsId, stepId, type, template, RejectStepId)
      const subdata = {
        id: this.projectId,
        check_status: type,
        step_id: RejectStepId || '',
        info_advice: template.Remark,
        Files: template.Files
      }
      console.log(subdata)
      this.projectApprovalOperation(subdata, callback)
    },
    onCancel(affairsId, stepId, type, template, RejectStepId, callback) {
      this.$alert('是否确认撤销？', '撤销', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          const subdata = {
            flow_id: this.flowId,
            model_type: 'BuildProject'
          }
          this.$comFun
            .cancelFunc(subdata)
            .then(() => {
              callback(true)
              this.$message({
                type: 'success',
                message: '已撤销'
              })
              this.$route.params.refresh = true // 返回时刷新列表
              this.getAuditDetailByFlowId(this.flowId)
              this.getAuditData(this.flowId)
            })
            .catch((err) => {
              this.$message.error(err)
            })
        })
        .catch((err) => {
          console.log(err)
        })
    }
    // // 立项审批操作
    // projectApprovalOperation() {
    //   this.$refs.projectApprovalDialog.open()
    // },
    // projectApprovalSuccess() {
    //   this.$route.params.refresh = true // 返回时刷新列表
    //   this.getAuditDetailByFlowId(this.flowId)
    //   this.getAuditData(this.flowId)
    // }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "@/styles/variables.scss";
.view-container {
  padding-top: 110px;
  .tip-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    p {
      margin: 0px;
      padding: 20px 0px;
    }
    .tip-title {
      font-size: $font-size-main;
      color: $font-color-main;
      width: 120px;
      text-align: right;
      padding-right: 12px;
      box-sizing: border-box;
    }
    .department-container {
      .icon {
        margin-left: 4px;
      }
      .el-tag {
        margin-right: 10px;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
  .status-container {
    margin-bottom: 40px;
  }
}

.tab-content {
  min-height: 200px;
}
</style>
